<template>
    <el-dialog :title="isEdit?'编辑场区机械配置':'新增场区机械配置'" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="add-form" label-width="110px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="场区" prop="areaNo">
                        <auto-search-area-no v-model="form.areaNo" @matchRecord="handleSelectAreaNo" :name="form.areaNo"></auto-search-area-no>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属单位" prop="orgId">
                        <auto-search-org v-model="form.orgId" @select="v=>{form.orgId=v;form.deptId='';form.deptName='';}" @selectName="v=>form.orgName=v" :disabled="true" :name="form.orgName"></auto-search-org>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属部门" prop="deptId">
                        <search-dept v-model="form.deptId" @select="v=>{form.deptId=v;}" @selectName="v=>form.deptName=v" :orgId="form.orgId" :disabled="!form.orgId" :name="form.deptName"></search-dept>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="form.containerYardMachine" border stripe max-height="500">
                        <el-table-column label="序号" fixed="left" min-width="50">
                            <template slot-scope="scope">
                                {{ scope.$index+1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="machineName" label="机械"  min-width="160">
                            <template slot-scope="scope">
                                <auto-search-machine v-model="scope.row.jobMachineName" :valid="true" :name="scope.row.jobMachineName" @selectId="v=>scope.row.jobMachineId=v"></auto-search-machine>
                            </template>
                        </el-table-column>
                        <el-table-column prop="priority" label="优先级"  min-width="100">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.priority" placeholder="请选择" clearable>
                                    <el-option v-for="[key, val] in _dictPriorityType" :key="key" :label="val" :value="key"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startBay" label="开始贝"  min-width="105">
                            <template slot-scope="scope">
                                <el-input style="width:80px" v-model="scope.row.startBay" @change="handleBR(scope.$index,scope.row.startBay,'startBay')" :disabled="virtual||!form.areaNo"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="endBay" label="结束贝"  min-width="105">
                            <template slot-scope="scope">
                                <el-input style="width:80px" v-model="scope.row.endBay" @change="handleBR(scope.$index,scope.row.endBay,'endBay')" :disabled="virtual||!form.areaNo"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startRow" label="开始排"  min-width="105">
                            <template slot-scope="scope">
                                <el-input style="width:80px" v-model="scope.row.startRow" @change="handleBR(scope.$index,scope.row.startRow,'startRow')" :disabled="virtual||!form.areaNo"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="endRow" label="结束排"  min-width="105">
                            <template slot-scope="scope">
                                <el-input style="width:80px" v-model="scope.row.endRow" @change="handleBR(scope.$index,scope.row.endRow,'endRow')" :disabled="virtual||!form.areaNo"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="valid" label="是否可用"  min-width="110">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.valid" placeholder="请选择" clearable>
                                    <el-option v-for="[key, val] in _dictTrueOrFalse" :key="key" :label="val" :value="key"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注"  min-width="100">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remark" :maxlength="100"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" align="center" label="操作"  width="180">
                            <template slot-scope="scope">
                                <el-button type="text" class="danger" size="small" @click="handleRemove(scope.$index)">删除
                                </el-button>
                                <el-button size="small" type="text" @click="handleAdd(scope.$index)">
                                    增加
                                </el-button>
                                <el-button size="small" :disabled="virtual" type="text" @click="handleAll(scope.$index)">
                                    全覆盖
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { addYardMachine, updateYardMachine } from "@/api/yardPlan/yardPlan";
import autoSearchOrg from "@/components/autocomplete/autoSearchOrg";
import searchDept from "@/components/autocomplete/autoSearchDept";
import autoSearchAreaNo from "@/components/autocomplete/autoSearchAreaNo";
import autoSearchMachine from "@/components/autocomplete/autoSearchMachine";
import { maxLength, sortLength } from "@/utils/rules";
import { REG_NUMBER } from "@/utils/Reg";

export default {
    name: "roleForm",
    components: {
        autoSearchOrg,
        searchDept,
        autoSearchAreaNo,
        autoSearchMachine
    },
    data() {
        return {
            form: this.clearForm(),
            rules: {
                areaNo: [
                    { required: true, message: "请选择场区", trigger: "blur" },
                    sortLength
                ],
                orgId: [
                    { required: true, message: "请选择单位", trigger: "change" }
                ]
                // deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                // remark: [maxLength]
            },
            maxBay: "",
            maxRow: "",
            dialogForm: false,
            isEdit: false,
            virtual: true
        };
    },
    methods: {
        clearForm() {
            return {
                areaNo: "",
                areaId: "",
                orgId:
                    this.$store.state.user.currentUser.org &&
                    this.$store.state.user.currentUser.org.id,
                orgName:
                    this.$store.state.user.currentUser.org &&
                    this.$store.state.user.currentUser.org.name,
                deptId: "",
                deptName: "",
                containerYardMachine: [
                    {
                        jobMachineName: "",
                        jobMachineId: "",
                        priority: "",
                        startBay: "",
                        endBay: "",
                        startRow: "",
                        endRow: "",
                        valid: true,
                        remark: ""
                    }
                ]
            };
        },
        // 保存
        handleSubmit() {
            this.$refs.form.validate(valid => {
                let machine = this.form.containerYardMachine;
                for (let i = 0; i < machine.length; i++) {
                    let index = `序号为${i + 1}`;
                    console.log(machine[i].jobMachineName);
                    if (!machine[i].jobMachineName) {
                        this.$message({
                            message: `${index}的机械不能为空`,
                            type: "error"
                        });
                        return;
                    }
                    if (!machine[i].priority) {
                        this.$message({
                            message: `${index}的优先级不能为空`,
                            type: "error"
                        });
                        return;
                    }
                    if (!this.virtual) {
                        if (!machine[i].startBay) {
                            this.$message({
                                message: `${index}的开始贝不能为空`,
                                type: "error"
                            });
                            return;
                        }
                        if (!machine[i].endBay) {
                            this.$message({
                                message: `${index}的结束贝不能为空`,
                                type: "error"
                            });
                            return;
                        }
                        if (!machine[i].startRow) {
                            this.$message({
                                message: `${index}的开始排不能为空`,
                                type: "error"
                            });
                            return;
                        }
                        if (!machine[i].endRow) {
                            this.$message({
                                message: `${index}的结束排不能为空`,
                                type: "error"
                            });
                            return;
                        }
                    }
                }
                if (valid) {
                    this.isEdit ? this.handleToEdit() : this.handleToAdd();
                } else {
                    this.$message({ message: "请检查表单", type: "error" });
                }
            });
        },
        // 新增
        handleToAdd() {
            addYardMachine(this.form).then(res => {
                this.$message({ message: "新增成功!", type: "success" });
                this.dialogForm = false;
                this.$emit("load");
            });
        },
        // 编辑
        handleToEdit() {
            updateYardMachine(this.form.id, this.form).then(res => {
                this.$message({ message: "编辑成功!", type: "success" });
                this.dialogForm = false;
                this.$emit("load");
            });
        },
        // 选择场区的事件
        handleSelectAreaNo(item) {
            this.form = this.clearForm();
            this.virtual = false;
            if (item) {
                this.form.areaId = item.id;
                this.maxBay = item.maxBay;
                this.maxRow = item.maxRow;
                this.virtual = item.virtual;
            }
        }, // 删除
        handleRemove(index) {
            this.form.containerYardMachine.splice(index, 1);
        },
        // 增加一条
        handleAdd(index) {
            this.form.containerYardMachine.push({
                jobMachineName: "",
                jobMachineId: "",
                priority: "",
                startBay: "",
                endBay: "",
                startRow: "",
                endRow: "",
                valid: true,
                remark: ""
            });
        },
        // 全覆盖
        handleAll(index) {
            this.form.containerYardMachine[index].startBay = "01";
            this.form.containerYardMachine[index].endBay = this.maxBay;
            this.form.containerYardMachine[index].startRow = "01";
            this.form.containerYardMachine[index].endRow = this.maxRow;
        },
        // 判断贝和排
        handleBR(index, val, type) {
            if (REG_NUMBER.test(val)) {
                const [maxBay, maxRow, minBay, minRow] = [
                    this.maxBay,
                    this.maxRow,
                    0,
                    0
                ];
                if (type.indexOf("Bay") > -1) {
                    if (type.indexOf("end") > -1) {
                        if (
                            val <
                            Number(
                                this.form.containerYardMachine[index].startBay
                            )
                        ) {
                            val = Number(
                                this.form.containerYardMachine[index].startBay
                            );
                        }
                    }
                    if (val > this.maxBay) {
                        val = maxBay;
                    }
                }
                if (type.indexOf("Row") > -1) {
                    if (type.indexOf("end") > -1) {
                        if (
                            val <
                            Number(
                                this.form.containerYardMachine[index].startRow
                            )
                        ) {
                            val = Number(
                                this.form.containerYardMachine[index].startRow
                            );
                        }
                    }
                    if (val > this.maxRow) {
                        val = maxRow;
                    }
                }
                if (val > 0 && val < 10) {
                    val = "0" + Number(val);
                }
                this.form.containerYardMachine[index][type] = val;

                if (type.indexOf("Bay") > -1) {
                    if (type.indexOf("start") > -1) {
                        if (
                            this.form.containerYardMachine[index].endBay < val
                        ) {
                            this.form.containerYardMachine[index].endBay = val;
                        }
                    }
                }
                if (type.indexOf("Row") > -1) {
                    if (type.indexOf("start") > -1) {
                        if (
                            this.form.containerYardMachine[index].endRow < val
                        ) {
                            this.form.containerYardMachine[index].endRow = val;
                        }
                    }
                }
            } else {
                this.form.containerYardMachine[index][type] = "0";
            }
        }
    },
    watch: {
        dialogForm(bool) {
            if (!bool) {
                this.$refs.form.resetFields();
                this.isEdit = false;
                this.form = this.clearForm();
                this.$emit("clear");
            }
        }
    }
};
</script>

<style scoped>
</style>
